<div id="userTable">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
            <a lay-href="">主页</a><span lay-separator="">/</span>
            <a><cite>人员管理</cite></a>
        </div>
    </div>
    <div class="demoTable">
        <button id="add" class="layui-btn" data-action="form.html">添加</button>
        <button class="layui-btn"><a href="userServlet?opr=exp" target="_blank">导出</a></button>
        <button class="layui-btn"><a href="xiazai.xlsx" target="_blank"><i class="layui-icon" style="font-size: 30px; ">&#xe61e;</i>
            下载模板</a></button>
        <button class="layui-btn" id="improt">导入</button>
    </div>

    <table class="layui-hide" id="test"></table>
</div><!-- 用户列表部分 -->

<div id="userForm" style="display: none;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend id="formTitle">录入用户信息</legend>
    </fieldset>

    <form id="faqform" class="layui-form" method="post" action="/add">
        <input type="hidden" id="opr" name="opr" value="addUser"/>
        <input type="hidden" id="id" name="id" value=""/>
        <div class="layui-form-item">
            <label class="layui-form-label">登录用户</label>
            <div class="layui-input-block">
                <input name="name" id="name" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input name="realName" id="realName" lay-verify="title" autocomplete="off"
                       placeholder="请输入身份证上的名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="" lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <select name="deptId" id="dept">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-block">
                <select name="roleId">
                    <option value="部门经理">经理</option>
                    <option value="员工">员工</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input name="birthday" id="ldate" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="commit" type="button" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                <button id="back" type="button" class="layui-btn layui-btn-primary">返回</button>
            </div>
        </div>
    </form>
</div><!-- 添加用户和修改用户 -->
<script>
    layui.use(["table", "jquery", "form", "laydate", "upload"], function () {//引入layui模块
        var table = layui.table, $ = layui.jquery, form = layui.form, laydate = layui.laydate, upload = layui.upload;//初始化
        var tableIns = table.render({
            /* 构建员工列表 */
            elem: '#test'
            , url: 'userServlet'
            , page: true
            , limit: 8
            , limits: [8, 16, 24]
            , where: {"opr": "findList"}
            , cols: [[
                {type: 'numbers'}
                , {field: 'name', title: '用户名'}
                , {field: 'realName', title: '真实名称'}
                , {field: "birthday", title: "生日"}
                , {field: 'deptName', title: '部门名称'}
                , {field: 'roleId', title: '角色'}
                , {field: 'status', title: '状态', width: 85, templet: '#switchTpl', unresize: true}
                , {field: 'updateTime', title: '最后更新时间'}
                , {fixed: 'right', title: '操作', align: 'center', width: 178, toolbar: '#barDemo'}
            ]]
        });

        laydate.render({
            /* 初始化日期控件 */
            elem: "#ldate"
        });

        //监听工具条
        //如果当前页面只有一个表格的话，可以直接监听tool，那么如果有多个，需要在table上设置layui-filter=a,并且table.on('tool(a)'),这样的方式
        table.on('tool', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {//点击查看按钮显示数据
                layer.open({
                    title: data.title
                    , type: 1
                    , area: '500px'
                    , content: '<fieldset class="layui-elem-field layui-field-title">\n' +
                    '  <legend>作者 - ' + data.author + '</legend>\n' +
                    '  <div class="layui-field-box">\n' +
                    ' ' + data.content + '\n' +
                    '  </div>\n' +
                    '</fieldset>'
                });
            } else if (obj.event === 'del') {//点击删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({//调用去后台进行ajax删除
                        url: "userServlet",
                        data: {"opr": "del", "id": data.id},
                        type: "post",
                        dataType: "json",
                        success: function (j) {
                            if (j.state == true) {
                                layer.msg(j.meg);
                                obj.del();
                                layer.close(index);
                            }
                        }
                    });

                });
            } else if (obj.event === 'edit') {//进行修改的时候，我将数据直接赋值到表单里去，修改了opr的值

                debugger;
                $("#formTitle").html("修改用户信息");
                $("#userForm input[name=id]").val(data.id);
                $("#userForm input[name=opr]").val("update");
                $("#userForm input[name=name]").val(data.name);
                $("#userForm input[name=realName]").val(data.realName);
                $("#userForm input[name=birthday]").val(data.birthday);
                $("#userForm input[name=password]").val(data.password);
                form.render();//对于表单元素进行渲染

                $("#userTable").toggle();
                $("#userForm").toggle();
            }
        });

        //初始化部门下拉列表
        $.ajax({
            url: "deptServlet",
            data: {"limit": "1000", "page": "1", "opr": "query"},
            dataType: "json",
            type: "post",
            success: function (d) {
                $.each(d.data, function (i, n) {
                    var option = "<option value='" + n.id + "'>" + n.name + "</option>";
                    $("#dept").append(option);
                });
                form.render();//渲染表单
            }
        });


        //添加按钮，当点击时，将表单还愿，并且修改使其功能为添加addUser
        $("#add").click(function () {
            $("#reset").click();
            $("#userForm input[name=opr]").val("addUser");
            $("#formTitle").html("录入用户信息");
            $("#userTable").toggle();
            $("#userForm").toggle();
        });
        //返回按钮
        $("#back").click(function () {
            $("#userTable").toggle();
            $("#userForm").toggle();
        });

        upload.render({//上传示例
            elem: '#improt'
            , url: 'excelServlet'
            , done: function (res, index, upload) { //上传后的回调
                if (res.code == 0) {
                    layer.msg("上传成功");
                    tableIns.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });//重新载入表格
                }
            }
            , accept: 'file' //允许上传的文件类型
        });


        //表单监听，监听提交
        form.on("submit(add)", function (data) {//先进行表单验证，如果验证不通过不能进入此处代码
            $.post("userServlet", $("#faqform").serialize(), function (data) {
                if (data.state) {
                    layer.msg(data.meg);
                    tableIns.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });//重新载入表格
                } else {
                    layer.msg(data.meg);
                }
                $("#userTable").toggle();
                $("#userForm").toggle();
            }, "json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        /* end */
    });

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" value="{{d.status}}" lay-skin="switch" lay-text="正式|实习" lay-filter="sexDemo" {{
           d.status== 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id== 10006
           ? 'checked' : '' }}>
</script>
